<template>
	<div :style="{height:height}" style="overflow: hidden;" class="navigation-mobile-panel">
		<div class="mobile-layout">
			<div class="mobile-layout-left" @click="hidePopOver" :class="layout.isCollapse?'right':'full'">
				<div class="toggle" :class="layout.toggleClass" :title="layout.isCollapse?$t('收起'):$t('展开')" @click="changeLayoutPanel">
					<i class="awsui-iconfont" v-html="layout.icon"></i>
				</div>
				<div class="mobile-layout-left-content" :style="{width: layout.leftWidth + 'px'}" v-show="layout.leftSideBarShow">
					<left-mobile @setAppMobileHomePage="getAppMobileHomeResource" ref="leftMobile"></left-mobile>
				</div>
			</div>
			<div class="mobile-layout-main">
				<app-resource @refreshList="refreshAppList"
							  ref="appResource"
							  :haveWorkbenchCmd="haveWorkbenchCmd"
							  :appInfo="appInfo"
							  :isCollapse="layout.isCollapse"
							  currentAppId=""
							  :isYijingCloud="isYijingCloud"
							  :isYijingStandard="isYijingStandard"
							  :isYijingPortal_4="isYijingPortal_4"
							  :isYijingWPS="isYijingWPS"
							  :showUseCustomMenuSwitch="showUseCustomMenuSwitch"
				></app-resource>

			</div>
		</div>
	</div>
</template>
<script>
	import LeftMobile from "@/views/mobile/LeftMobile.vue";
	import AppResource from "@/views/mobile/AppResource.vue";
  	export default {
		name: 'MobileHome',
		components: {LeftMobile, AppResource},
		props: {
			haveWorkbenchCmd: {
				type: Boolean
			},
	        isYijingCloud: {
				type: Boolean
			},
	        isYijingStandard: {
				type: Boolean
			},
			isYijingPortal_4: {
				type: Boolean
			},
			isYijingWPS: {
				type: Boolean
			},
			showUseCustomMenuSwitch: {
				type: Boolean
			}
		},
		data() {
			return {
				height: (document.documentElement.clientHeight - 55) + 'px',
				layout: {
					icon: "&#xe837;",
					rightIcon: "&#xe838;",
					leftIcon: "&#xe837;",
					isCollapse: true,
					leftWidth: 300,
					toggleClass: "toggleShow",
					leftSideBarShow: true,
				},
				appInfo: {},
			}
		},
		mounted() {
 		},
		watch: {

		},
		methods: {
			hidePopOver() {
				if (this.$refs.appResource != undefined) {
					this.$refs.appResource.hideMobileHomeDataOpVisiable();
				}
			},
			refreshAppList(appId,type) {
				this.$refs.leftMobile.reloadAppListData(appId,type);
			},
			changeLayoutPanel() {
				let $this = this;
				var that = this;
				if (that.layout.isCollapse) {
					that.layout.icon = that.layout.rightIcon;
					that.layout.leftWidth = 0;
					that.layout.toggleClass = "toggleHide";
					that.layout.leftSideBarShow = false;
					that.resizeLayout("hide");
				} else {
					that.layout.icon = that.layout.leftIcon;
					that.layout.leftWidth = 300;
					that.layout.toggleClass = "toggleShow";
					that.layout.leftSideBarShow = true;
					that.resizeLayout("show");
				}

				that.layout.isCollapse = !that.layout.isCollapse;
			},
			resizeLayout(type) {
				let $this = this;
				var that = this;
				if (type == "hide") {
					document.querySelector(".mobile-layout-main").style.width = "calc(100%)";
					document.querySelector(".mobile-layout-main").style.left = that.layout.leftWidth + "px";
				} else {
					document.querySelector(".mobile-layout-main").style.width = "calc(100% - 300px )";
					document.querySelector(".mobile-layout-main").style.left = that.layout.leftWidth + "px";
				}

			},
			getAppMobileHomeResource(data) {
				let $this = this;
				var that = this;
				that.appInfo = data;
				console.log(data);
			}
		}
	}
</script>
<style scoped>
	.mobile-layout .mobile-layout-left {
		position: absolute;
		top: 0px;
		max-width: 300px;
		min-height: calc(100% - 65px);
	}

	.mobile-layout .mobile-layout-left.right {
		z-index: 1;
	}

	.mobile-layout .mobile-layout-left.full {
		z-index: 10;
	}

	.mobile-layout .mobile-layout-left .toggle {
		width: 20px;
		height: 28px;
		line-height: 28px;
		position: absolute;
		z-index: 100;
		top: 15px;
		text-align: center;
		text-decoration: none;
		border: 1px solid #dce3e8;
		color: #666666;
		font-size: 16px;
		transform: translate(0, -50%);
		cursor: pointer;
	}

	.toggleShow {
		border-right: none !important;
		right: 0px;
		border-radius: 5px 0px 0px 5px;
	}

	.toggleShow i {
		float: right;
	}

	.toggleHide {
		border-left: none !important;
		right: -22px;
		border-radius: 0px 5px 5px 0px;
	}

	.toggleHide i {
		float: left;
	}

	.mobile-layout .mobile-layout-left .toggle:hover {
		border: 1px solid #3383da;
		border-left: none;
		background: #3383da;
		color: #fff;
		box-shadow: 1px 0 5px #3383da;
	}

	.mobile-layout .mobile-layout-main {
		height: calc(100%);
		border-left: 1px solid #dce3e8;
		overflow: auto;
		position: absolute;
		left: 300px;
		z-index: 1;
		width: calc(100% - 300px);
	}
</style>
<style>
	.el-overlay.is-message-box {
		display: block !important;
	}

	.el-overlay .el-drawer.rtl {
		-webkit-animation: none !important;
		animation: none !important;
		right: 0 !important;
	}
</style>